<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--
        保留组件状态
        include:保留哪些
        exclude:不保留哪些
    -->
    <keep-alive include="com-a,com-b">
        <!--动态组件-->
        <component :is="type"></component>
    </keep-alive>
    <hr/>
    <button @click="changeComponent('com-a')">com-a</button>
    <button @click="changeComponent('com-b')">com-b</button>
    <button @click="changeComponent('com-c')">com-c</button>
    <button @click="changeComponent('com-d')">com-d</button>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('com-a', {
        template: `
            <div>
                我是组件com-a
                <input/>
            </div>
        `
    })
    Vue.component('com-b', {
        template: `
            <div>
                我是组件com-b
                <input/>
            </div>
        `
    })
    Vue.component('com-c', {
        template: `
            <div>
                我是组件com-c
                <input/>
            </div>
        `
    })
    Vue.component('com-d', {
        template: `
            <div>
                我是组件com-d
                <input/>
            </div>
        `
    })

    new Vue({
        el: '#app',
        data() {
            return {
                type: 'com-a'
            }
        },
        methods: {
            changeComponent(type) {
                this.type = type
            }
        }
    })
</script>